<!doctype html>
<html>
<head>
    <script src="js/utils.js" > </script>
    <script src="js/loader.js" > </script>
    <script src="js/sound.js" > </script>
    <script src="js/keyboard.js" > </script>
    <script src="js/game.js" > </script>
    <link rel="stylesheet" href="css/styles.css">


</head>
<body>
	<script>
		window.addEventListener('load', function(){
			keyboard.init();
			loader.init();
			sound.init();
			game.init();


			sound.setSounds({
				animal: ['audio/animal'],
				shot: ['audio/shot'], 
				hurt: ['audio/hurt']
			});


			function startGame(){
				setInterval(logicLoop,40);
				requestAnimationFrame(drawingLoop, game.canvas);
				sound.play('animal');
				music.setSongs(['audio/shot', 'audio/animal']);
				music.play();
			}

			if (loader.left == 0){
				startGame();
			} else {
				loader.onAllLoaded = startGame;
			}
		});

		


	</script>
    <canvas id="foreground" width="800" height="600" style = "border:black 1px solid; background-image:url('img/background.png');"> </canvas>
</body>
</html>